import React, {FC} from "react";

import styled, {css} from 'styled-components'


type PropsType ={
    primary?: boolean
}

const  Button = styled.button<PropsType>`
       background-color: #61dafb;
       border-radius: 3px;
       ${(props) =>
          props.primary &&
          css`
            color: red;
          `}
`
const Div = styled.div`
          text-align: center;
`
const CssDemo : FC= ()=>{
    return<>
    <Div>
        <p>hello world</p>
        <Button primary={false}>点击我</Button>
        <Button primary>点</Button>
    </Div>
    </>
}
export default CssDemo;